<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				text-align: center;
			}
			p {
				margin: 10px auto;
				width: 800px;
				height: 400px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<p></p><p></p><p></p><p></p><p></p>
		<img data-src="../image/kuaidi.png" ><br />
		<img data-src="../image/feiji.png" ><br />
		<img data-src="../image/fuwu.png" ><br />
		<img data-src="../image/tianmao.png" ><br />
		<img data-src="../image/gupiao.png" ><br />
		<p></p>
		<script type="text/javascript">
			// 获取所有图片
			let imgs = document.querySelectorAll("img");
			// 交叉观察对象
			const observer = new IntersectionObserver(callback);
			// 开启观察
			imgs.forEach(img => {
					observer.observe(img);
			});
			// 观察到时
			function callback(entries) {
				entries.forEach(entry => {
					console.log(entry);
					if (entry.isIntersecting) {
						const img = entry.target;
						const data_src = img.getAttribute("data-src");
						// 关闭观察
						img.setAttribute("src", data_src);
						observer.unobserve(img);		
					}
				});
			}
			/**
			 * 观察到图片与可视区交叉时
			 * 进行加载
			 * 然后关闭观察模式
			 */
		</script>
	</body>
</html>
